:root {
    /* Colors */
    --color-background-code-1: #d8f5fa;
    --color-background-code-2: #e0f3f6;
    --color-background-code-3: #fbffe6;
    --color-background-data: #fae8f5;
    --color-code: #744c2b;
    --color-default: #000000;
    --color-highlight: #f0f0f0;
    --color-emphasis: #e0e0e0;
    --color-warning: #a00000;

    /* Dimensions */
    --dim-border-default: 5px;
    --dim-border-table: 1px;
    --dim-box-padding: 0.5rem;
    --dim-code-block: 0.5rem;
    --dim-list-bottom: 1rem;
    --dim-page-padding: 1.5rem;
    --dim-page-padding-neg: -1.5rem;
    --dim-page-width: 50rem;

    /* Fonts */
    --font-size-default: 12pt;
    --font-size-nav-title: 14pt;
    --font-size-nav-item: 11pt;
    --font-fraction-code: 90%;
    --font-fraction-file-link: 75%;

    /* Shadow */
    --shadow-box: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Entire page */
html {
    font-family: "Source Sans Pro",sans-serif;
    line-height: 1.5;
    font-size: var(--font-size-default);
}

/* Navigation */
.nav-main {
    font-size: var(--font-size-nav-title);
    padding: 0px;
    text-align: left;
    border-bottom: solid var(--dim-border-default) var(--color-default);
}

.nav-main ul {
    padding-left: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.nav-main li {
    display: inline-block;
}

.nav-main li a {
    margin-right: 1em;
}

/* Dropdown menu */
.dropdown {
    display: inline-block;
    position: relative;
    padding-right: 1em;
}

.dropdown-content {
    background-color: #f9f9f9;
    box-shadow: 2px 8px 16px 2px rgba(0,0,0,0.2);
    display: none;
    padding: 8px;
    position: absolute;
    text-align: left;
    z-index: 1;
    line-height: normal;
}

.nav-main li a.dropdown-item {
    font-size: var(--font-size-nav-item);
    padding: 0px;
    margin: 0px;
}

.nowrap {
    white-space: nowrap;
}

/* Page body */
body {
    margin: 0px;
    max-width: var(--dim-page-width);
    padding-left: var(--dim-page-padding);
    padding-right: var(--dim-page-padding);
    margin-left: auto;
    margin-right: auto;
}

body.draft {
    background-image: url('draft.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
}

/* Footer */
footer {
    text-align: center;
    margin-bottom: 1rem;
}

img.iconlink {
    width: 1em;
    height: 1em;
}

/* Headings */
h1.page-title {
    margin-bottom: 0px;
    border-bottom: 0px;
}

h2.lede {
    font-style: italic;
    margin-top: 0px;
}

div.callout h3::before {
    content: "\2606 "; /* star */
}

h3.exercise::before {
    content: "\270E "; /* pencil */
}

div.terms p {
    font-weight: bold;
}

/* Figures */
figure {
    text-align: center;
    margin-inline-start: 0px;
}

/* Links */
a {
    text-decoration: none;
}

/* Centered div */
div.centered {
    text-align: center;
}

/* Special div for callouts */
div.callout {
    background-color: var(--color-highlight);
    padding-left: var(--dim-box-padding);
    padding-right: var(--dim-box-padding);
}

/* Special div for term definitions */
div.terms {
    background-color: var(--color-highlight);
    padding-left: var(--dim-box-padding);
    padding-right: var(--dim-box-padding);
}

div.terms p {
    margin: 0px;
}

/* Code */
code {
    font-size: var(--font-fraction-code);
    color: var(--color-code);
}

pre {
    margin-top: 0px;
    line-height: normal;
    padding-left: var(--dim-code-block);
}

pre code {
    color: var(--color-default);
}

div.file-link {
    font-size: var(--font-fraction-file-link);
    font-style: italic;
    padding-right: var(--dim-box-padding);
    text-align: right;
}

/* Languages */
.language-as {
    background-color: var(--color-background-code-2);
}
.language-html {
    background-color: var(--color-background-data);
}
.language-js {
    background-color: var(--color-background-code-1);
}
.language-json {
    background-color: var(--color-background-data);
}
.language-make {
    background-color: var(--color-background-code-3);
}
.language-mx {
    background-color: var(--color-background-code-3);
}
.language-out {
    background-color: var(--color-background-data);
}
.language-py {
    background-color: var(--color-background-code-2);
}
.language-sh {
    background-color: var(--color-background-code-3);
}
.language-txt {
    background-color: var(--color-background-data);
}
.language-yml {
    background-color: var(--color-background-data);
}

/* Definition lists */
dt {
    font-weight: bold;
}

dd p {
    margin-top: 0px;
}

/* Tables */
table {
    border-collapse: collapse;
    border: var(--dim-border-table) solid var(--color-highlight);
    caption-side: bottom;
    font-size: var(--font-fraction-code);
    margin-bottom: 1rem;
}

th {
    text-align: left;
    border:  var(--dim-border-table) solid var(--color-highlight);
    padding-left: var(--dim-box-padding);
    padding-right: var(--dim-box-padding);
}

td {
    text-align: left;
    border:  var(--dim-border-table) solid var(--color-highlight);
    padding-left: var(--dim-box-padding);
    padding-right: var(--dim-box-padding);
}

tbody tr:nth-child(odd) td {
    background-color: var(--color-highlight);
}

caption {
    font-weight: bold;
}

/* Quotations */
blockquote {
    border-left: solid var(--color-highlight) var(--dim-border-default);
    padding-left: var(--dim-border-default);
}

/* Figures */
figcaption {
    font-weight: bold;
}

/* Things to fix */
span.fixme {
    color: var(--color-warning);
    background-color: var(--color-highlight);
}

span.fixme::before {
    content: "FIXME: ";
}

/* Index entries */
span[i] {
    background-color: var(--color-emphasis);
}

/* Bibliography entries */
p.bibliography {
    margin-left: var(--dim-page-padding);
    text-indent: var(--dim-page-padding-neg);
}
span.bibliographykey {
    font-weight: bold;
}
span.bibliographykey::before {
    content: "[";
}
span.bibliographykey::after {
    content: "] ";
}
